import React, { Component } from 'react'
import axios from "axios"
import Header from './components/Header'
import Main from "./components/Main"
import Footer from "./components/Footer"

export class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       list:[],
       newArr:[],
    }
  }
  componentDidMount() { 
    axios.get("/list").then(res=>{
     this.setState({
       list:res.data,
       newArr:res.data
     })

    })
   }
onserch(val){
 const {list,newArr}=this.state
  newArr=list.forEach((item)=>{
      item.child.filter((i)=>{
        return i.title.includes(val)
      })
  })
  this.state.setState({
    newArr:newArr

  })
  console.log(newArr)

}
 


  render() {
    const {list}=this.state
    return (
      <div className='App'>
        <Header list={list} fnonserch={this.onserch}></Header>
        <Main list={list}></Main>
        <Footer></Footer>


        
      </div>
    )
  }
}

export default App